<!-- 从业者端-完善信息-申报信息 -->
<template>
	<view class="container">
		<!-- 标题 -->
		<!--    <view class="header">
      <text class="title">申请入驻</text>
    </view> -->

		<!-- 步骤条 -->
		<u-steps :list="stepsList" :current="0" active-color="#03B8CD" mode="number">
		</u-steps>

<!-- 	///	日历
		<u-calendar v-model="show" ref="calendar" @change="change" :active-bg-color="activeBgColor" :btn-type="btnType"
			max-date="2100-01-01">
		</u-calendar> -->
		
		<!-- picker弹窗 -->
		<u-picker v-model="show" :mode="mode" :range="range" @confirm="confirm"></u-picker>
		



		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 提交的this.$refs.form.validate验证，一定是需要有form标签的ref="form"来对应的，否则会报错 -->
			<u-form :model="form" ref="form" :rules="rules">
				<!-- 上传申报表 -->
				<view class="form-section">
					<view class="section-title">
						<text class="required">*</text>
						<text>上传申报表</text>
						<text class="section-subtitle">优先上传图片格式,确保图片中文字清晰可识别。也支持word、PDF上传</text>
					</view>
					<u-upload 
					   :action="action" 
						 :file-list="form.licenseFiles" 
						 @on-list-change="onchange" 
						 @on-remove="(e) => deletePic(e, index)"
						 :multiple="false" 
						 max-count="1"
						 upload-text="上传申报执照" 
						 :custom-btn="true"
						 :auto-upload="false"
						 >
						<!-- 自定义上传图片 -->
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
				</view>
				
				<!-- 2寸照片 -->						
				<view class="form-section">
					<view class="section-title">
						<text class="required">*</text>
						<text>2寸照片</text>
						<text class="section-subtitle">上传二寸白底照片，建议彩色</text>
					</view>
					<u-upload 
					   :action="action" 
						 ref="upload" 
						 :file-list="form.photoFiles" 
						 @on-list-change="photoonchange" 
						 @on-remove="(e) => phdeletePic(e, index)"
						 :multiple="false" 
						 max-count="1"
						 upload-text="上传营业执照" 
						 :custom-btn="true"
						 :auto-upload="false"
						 >
						<!-- 自定义上传图片 -->
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
				</view>
				
				<!-- picker弹窗 -->
				<u-picker v-model="pickerShow" :mode="mode" :range="range" @confirm="confirm"></u-picker>
				

				<!-- 姓名 -->
				<view class="form-section">
					<u-form-item label="*姓名" prop="name" label-width="240">
						<u-input v-model="form.name" placeholder="请输入姓名" clearable />
					</u-form-item>
				</view>

				<!-- 性别 -->
<!-- 				<view class="form-section">
					<u-form-item label="*性别" prop="gender" label-width="240">
						<u-input v-model="form.gender" placeholder="性别" clearable />
					</u-form-item>
				</view> -->
				<view class="form-section">
					<u-form-item label="*性别" prop="gender" label-width="240">
						<!-- <u-input v-model="form.gender" placeholder="性别" clearable /> -->
						<u-radio-group v-model="form.gender">
							<u-radio name="男">男</u-radio>
							<u-radio name="女">女</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
				

				<!-- 执照起始日期 -->
				<view class="form-section">
					<u-form-item label="*出生日期" prop="startDate" label-width="240">
						<u-input v-model="form.startDate" placeholder="出生日期" clearable @click="showChange('start')" :focus="false"  disabled/>
					</u-form-item>
				</view>
				
				<!-- 身份证号 -->
				<view class="form-section">
					<u-form-item label="身份证号" prop="iphone" label-width="240">
						<u-input v-model="form.sfzcard" placeholder="请输入身份证号" clearable />
					</u-form-item>
				</view>

				<!-- 文化程度 -->
				<view class="form-section">
					<u-form-item label="文化程度" prop="Culture" label-width="240">
						<u-input v-model="form.Culture" placeholder="请选择文化程度" clearable @click="showChange('selector')" :focus="false"  disabled/>
					</u-form-item>
				</view>

				<!-- 联系电话 -->
				<view class="form-section">
					<u-form-item label="联系电话" prop="iphone" label-width="240">
						<u-input v-model="form.iphone" placeholder="请输入联系电话" clearable />
					</u-form-item>
				</view>
				
				<!-- 所在地区 -->
				<view class="form-section">
					<u-form-item label="所在地区" prop="selectRegion" label-width="240">
						<u-input v-model="form.selectRegion" placeholder="请选择所在地区" clearable @click="showChange('region')" :focus="false" disabled/>
					</u-form-item>
				</view>

				<!-- 按钮组 -->
				<view class="button-group">
<!-- 					<u-button type="default" @click="handlePrev" shape="circle" :custom-style="customStyleObject">
						上一步
					</u-button> -->
					<u-button type="primary" @click="handleNext" :custom-style="coutomStyleBut"  shape="circle" :loading="loading">
						信息无误，下一步
					</u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				coutomStyleBut: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff",
				},
				// 日历 
				show: false,
				activeBgColor: '#2979ff',
				btnType: "primary",
				inputType: "", //判断是起始日期还是有效日期
				mode: "selector",
				
				// picker弹窗
				pickerShow: false,
				mode: "selector",
				range:  ['硕士生以上', '硕士', '本科', '专科'],

				loading: false,
				//图片上传地址
				action: 'http://127.0.0.1:7001/upload',

				// 步骤条
				stepsList: [{
						name: "申报信息"
					},
					{
						name: "身份证件"
					},
					{
						name: "学历证明"
					},
					{
						name: "工作证明"
					},
					{
						name: "相关证书"
					},
				],
				
				form: {
					name: '',  ///改名
					gender: '',  ///性别
					startDate: '', //出生日期
					sfzcard: '', //身份证号
					Culture: '', //文化程度
					iphone: ''  ,///联系电话
					selectRegion: '' ,//所在地区
					// 图片数组,图片结构[{}]
					licenseFiles: [], ///申报照片
					licenseFilesId: '', //申报照片ID
					photoFiles: [], //2寸照片
					photoFilesId: '' ///2寸照片					
				},
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',

				},
				rules: {
					companyName: [{
						required: true,
						message: '请输入营业执照名称',
						trigger: 'blur'
					}],
					creditCode: [{
							required: true,
							message: '请输入社会信用代码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return /^[0-9A-Z]{18}$/.test(value);
							},
							message: '请输入18位统一社会信用代码',
							trigger: ['blur', 'change']
						}
					],
					legalPerson: [{
						required: true,
						message: '请输入法人姓名',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请选择起始日期',
						trigger: 'change'
					}]
				}
			}
		},
		onShow() {
			this.getKzsb()
		},
		methods: {
			getKzsb() {
				this.$u.api.querykzsb({
					"usercode": uni.getStorageSync('usercode'),//#用户编号
				}).then(res=>{
					console.log('申报get:',res)
					let sbInfo = res.data.base_info
					this.form = {
						name: sbInfo.cykzsb_name,  ///改名
						gender: sbInfo.cykzsb_sex,  ///性别
						startDate: sbInfo.cykzsb_csrq, //出生日期
						sfzcard: sbInfo.cykzsb_sfzh, //身份证号
						Culture: sbInfo.cykzsb_whcd, //文化程度
						iphone: sbInfo.cykzsb_phoneno  ,///联系电话
						selectRegion: sbInfo.cykzsb_addr ,//所在地区
						// 图片数组
						licenseFilesId: sbInfo.cykzsb_sbburi[0].imguri, //申报照片ID						
						photoFilesId: sbInfo.cykzsb_headeruri[0].imguri ///2寸照片	ID
					}	
					this.form.licenseFiles= []
					this.form.photoFiles= []
					let headeruri = this.chanageArray(sbInfo.cykzsb_sbburi)
					this.form.licenseFiles = [...this.form.licenseFiles, ...headeruri];
					let photouri = this.chanageArray(sbInfo.cykzsb_headeruri)
					this.form.photoFiles = [...this.form.photoFiles, ...photouri];
					console.log('edit:',this.form)
				})
				
			},
			
			// 存储成数组对象
			chanageArray(uri) {
				// 存储成数组对象
				return  uri.map(item => ({
					url: item.url, // 临时路径
				}))
				
			},		
			
			// 营业执照上传
			// 图片上传，不管是否成功都会触发
			// onchange(res, index, list) {
			// 	this.licenseFiles = list;
			// 	console.log("onchange:", this.licenseFiles)
			// },
			// 当申报表图片变化时
			onchange(list,name) {
				if(this.form.licenseFiles.length == 0) {
					// console.log('图片变化时-name：',name)
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", list,list[0])
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						// console.log("onchange-1:", newFiles)
						// this.licenseFiles = file // 更新文件列表	
						this.form.licenseFiles = []
						// this.certificates[name].photoList = file.url
						this.form.licenseFiles = [...this.form.licenseFiles, ...newFiles];
						console.log("onchange-2:", this.form)
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64(0)
						})					
					}
				}
				
			},
			
			// 上传Base64数据到服务器
			uploadBase64(index) {
				// console.log('upload:', this.base64Data)
				if (!this.base64Data) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					})
					return
				}	
				uni.showLoading({
					title: '上传中...'
				})		
				this.$u.api.uploadres({
					"usercode": uni.getStorageSync('usercode'),
					"rescode": this.base64Data,
					"restype": index,
					"resdesc": "上传照片"
				}).then(res => {					
					// 存储图片的ID
					if(index == 0) {
						this.form.licenseFilesId = res.data.base_info
						console.log('uploadres-image:', this.form.licenseFilesId)
					} else if (index == 1){
						this.form.photoFilesId = res.data.base_info
						console.log('uploadres-image:', this.form.photoFilesId)
					}

				})
			},
			
			
			// 当2寸照片变化时
			photoonchange(list,name) {
				if(this.form.photoFiles.length == 0) {
					// console.log('图片变化时-name：',name)
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						// console.log("onchange-1:", newFiles)
						// this.licenseFiles = file // 更新文件列表	
						this.form.photoFiles = []
						// this.certificates[name].photoList = file.url
						this.form.photoFiles = [...this.form.photoFiles, ...newFiles];
						console.log("onchange-2:", this.form)
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64(1)
						})					
					}
				}
				
			},
			
			
			
			
				// 图片上传结束		
			
			// 删除图片
			deletePic(event, index) {
				this.form.licenseFiles.splice(event, 1)
			},
			
			phdeletePic(event, index) {
				this.form.photoFiles.splice(event, 1)
			},
			
			
			
			


			// Picker弹窗
			showChange(type) {
				if(type == 'start') {
					// 日历
					this.inputType = type;					
					this.mode = 'time'
					this.show = !this.show;		
				} else if (type == 'selector'){
					// 学历
					this.inputType = type;
					this.mode = 'selector'
					this.range = ['硕士生以上', '硕士', '本科', '专科'];
					this.pickerShow = !this.pickerShow;
				} else {					
					// 地区region
					this.inputType = type;
					this.mode = 'region'
					this.pickerShow = !this.pickerShow;
				}

			},

		
			// 日历picker选择选择确认
			confirm(e) {
				if (this.inputType == 'start') {
					this.form.startDate = e.year + '-' + e.month + '-' + e.day
				} else if(this.inputType == 'selector') {
					// 赋值学历
					this.form.Culture = this.range[e[0]];
				} else {
					// 赋值地区
					this.form.selectRegion = e.province.label + '-' + e.city.label + '-' + e.area.label;;
				}
			},

			// 上一步
			handlePrev() {
				// uni.navigateBack();
				uni.reLaunch({
				  url: '/pages/Practitioner/perfectData/perfectData'
				});
			},

			// 下一步
			handleNext() {
				if (!this.$u.test.mobile(this.form.iphone)) {
					return this.$u.toast('请输入正确的手机号')
				}
				if (!this.$u.test.idCard(this.form.sfzcard)) {
					return this.$u.toast('请输入正确的身份证号')
				}
				
				console.log('下一步：', this.form)
				this.$u.api.createkzsb({
					"usercode": uni.getStorageSync('usercode'),//#用户编号
					"cykzsbsbburi": this.form.licenseFilesId,//#上报申报表uri
					"cykzsbheaderuri":this.form.photoFilesId,///#证件照uri
					"cykzsbname":this.form.name,///#姓名
					"cykzsbsex": this.form.gender,///#性别
					"cykzsbcsrq":this.form.startDate,///#出生日期
					"cykzsbsfzh":this.form.sfzcard,///#身份证号
					"cykzsbwhcd":this.form.Culture,///#文化程度
					"cykzsbphoneno": this.form.iphone, ///#联系电话
					"cykzsbaddr": this.form.selectRegion, ///#所在区域
				}).then(res => {
					console.log('考证申报：',res)
					
				})		
				uni.reLaunch({
				  url: '/pages/Practitioner/perfectData/idCard'
				});
				
				// uni.navigateTo({
				// 	url: '/pages/Practitioner/perfectData/idCard'
				// });
				
				// 验证跳转
				// this.$refs.form.validate(valid => {
				// 	if (!valid) return;

				// 	if (this.licenseFiles.length === 0) {
				// 		return this.$u.toast('请上传营业执照');
				// 		// console.log('toast请上传营业执照');
				// 	}

				// 	this.loading = true;

				// 	// 模拟API调用
				// 	setTimeout(() => {
				// 		this.loading = false;
				// 		uni.navigateTo({
				// 			url: '/pages/Practitioner/perfectData/idCard'
				// 		});
				// 	}, 1000);
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		// background-color: #f5f5f5;
		min-height: 100vh;


		.slot-btn {
			width: 104px;
			height: 104px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
			margin-left: 10px;
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

		.header {
			margin-bottom: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			.form-section {
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-content: flex-start;
				align-items: center;


				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 16rpx;

					.required {
						color: #f56c6c;
						margin-right: 8rpx;
					}
				}

				.section-subtitle {
					font-size: 26rpx;
					color: #999;
					margin-bottom: 20rpx;
					display: block;
				}
			}

			/deep/ .u-form-item__label {
				.required {
					color: #f56c6c;
					margin-right: 8rpx;
				}
			}

			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 350px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}
	}
</style>